<template>
  <div>
    <!-- <bar-chart :barDate='barDate'></bar-chart>
    <bar-chart2 :barDate='barDate2'></bar-chart2>
    <single-date-pie :pieDate='pieDate'></single-date-pie> -->
    <commonBar :titleText='titleText' :xAxisData="xAxisData" :seriesData='seriesData' :boxWidth="'200px'"></commonBar>
    <linesChart :titleText='titleText' :gradientList='gradientList' :boxWidth="'600px'" :boxHeight="'250px'" :dataset='dataset'></linesChart>
    <barsChart :titleText='titleText' :dataset='dataset' :boxWidth="'600px'" :boxHeight="'250px'"></barsChart>
    <!-- <button @click="titleText='test'">修改test</button>
    <button @click="seriesData=[4, 5, 6]">修改data</button>
    <button @click="boxWidth='600px'">修改width</button> -->
  </div>
</template>

<script>
// import barChart from '@/components/BarChart'
// import barChart2 from '@/components/BarChart2'
// import singleDatePie from '@/components/SingleDatePie'
import commonBar from '@/components/commonBar'
import linesChart from '@/components/linesChart'
import barsChart from '@/components/barsChart'

export default {
  name: 'barTest',
  components: {
    // barChart,
    // barChart2,
    // singleDatePie,
    commonBar,
    barsChart,
    linesChart
  },
  data () {
    return {
      barDate: {
        barSeriesName: ['李军'],
        barDateArray: [10, 20, 30],
        barColorArray: ['#ffff', '#5555'],
        barDateName: ['测试1', '测试2', '测试3']
      },
      barDate2: {
        barSeriesName: ['李军'],
        barDateArray: [10, 20, 1, 2, 3, 5, 4],
        barDateName: ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7'],
        barColorArray: ['#ffff', '#5555']
      },
      pieDate: {
        pieSeriesDateValue: 10,
        pieSeriesDateName: '测试'
      },
      titleText: '',
      seriesData: [],
      xAxisData: [],
      boxWidth: '600px',
      dataset: {},
      gradientList: [],
      colorList: [],
      axisLabelRotate: 0
    }
  },
  mounted () {
    this.titleText = '折线图'
    this.seriesData = [1, 2, 3, 4, 5, 6, 7, 8]
    this.xAxisData = [1, 22222, 33333, 55554, 5, 6, 7, 8]
    this.dataset = {
      source: [
        ['product', '2015', '2016', '2017'],
        ['2-1', 43.3, 85.8, 93.7],
        ['2-2', 43.3, 85.8, 93.7],
        ['2-3', 43.3, 85.8, 93.7],
        ['2-4', 83.1, 73.4, 55.1],
        ['2-5', 86.4, 65.2, 82.5],
        ['2-6', 72.4, 53.9, 39.1],
        ['2-7', 72.4, 53.9, 39.1],
        ['2-8', 72.4, 53.9, 39.1]
      ]
    }
    this.gradientList = [['red', 'blue'], ['yellow', 'green'], ['white', 'black']]
    this.colorList = ['white', 'blue', 'red']
    this.axisLabelRotate = -45
  },
  methods: {

  },
  destroyed () {

  }
}
</script>

<style lang='scss' scoped>
</style>
